<template>
  <div class="app">
    <h2 class="xiu">休闲娱乐</h2>
    <div class="category-bar">
      <el-button style="border: 2px solid #11100f; font-size: 10px;">足疗/按摩</el-button>
      <el-button style="border: 2px solid #11100f; font-size: 10px;">KTV</el-button>
      <span style="border: 2px solid #11100f;">酒吧</span>
      <span style="border: 2px solid #11100f;">电影</span>
      <span style="border: 2px solid #11100f;">Si</span>
    </div>
    <div class="filter-bar">
      <select>
        <option>全城</option>
        <!-- 其他排序选项 -->
      </select>
      <select>
        <option>智能排序</option>
        <option>选个单啊，我都没写</option>
        <!-- 其他排序选项 -->
      </select>
      <select>
        <option>筛选</option>
        <!-- 其他排序选项 -->
      </select>
    </div>
    <div class="item" v-for="(items, index) in tableData2" :key="index">
      <div class="item-header" @click="tj">
        <img :src="'http://localhost:6001'+items.imageUrl" width="300px" height="200px" style="border-radius:5%;">
        <div class="item-info">
          <h3>{{ items.name }}</h3>
          <div class="rating">
            <span v-for="i in items.rating" style="color: #42b983; margin-left: 10px">{{ '★★★★★' }}</span>
            <span>{{ items.consumption }}人消费</span>
          </div>
          <p>{{ items.location }}</p>
          <div class="features">
            <span v-for="feature in items.features">{{ feature }}</span>
          </div>
          <p class="comment">{{ items.comment }}</p>
        </div>
      </div>
      <div class="item-footer">
        <div class="price">
          <span>{{ items.price }}元</span>
        </div>
      </div>
    </div>

    <div class="item" v-for="(items, index) in tableData2" :key="index">
      <div class="item-header" @click="tj">
        <img :src="'http://localhost:6001'+items.originalPrice" width="300px" height="200px" style="border-radius:5%;">
        <div class="item-info">
          <h3>{{ items.sales }}</h3>
          <div class="rating">
            <span v-for="i in items.rating" style="color: #42b983; margin-left: 10px">{{ '★★★★★' }}</span>
            <span>{{ items.consumption }}人消费</span>
          </div>
          <p>{{ items.location }}</p>
          <div class="features">
            <span v-for="feature in items.features">{{ feature }}</span>
          </div>
          <p class="comment">{{ items.comment }}</p>
        </div>
      </div>
      <div class="item-footer">
        <div class="price">
          <span>{{ items.price }}元</span>
        </div>
      </div>
    </div>

    <div class="service-list">
      <div class="service-item" v-for="(club, index) in tableData1" :key="index">
        <div class="service-info">
          <div class="service-name">
            <span>{{ club.name }}</span>
          </div>
          <div class="service-sales">
            <span>{{ club.salesPeriod }}销售{{ club.salesNumber }}</span>
          </div>
        </div>
        <div class="service-price">
          <span class="current-price" style="color: #f44336">¥{{ club.currentPrice }}</span>
          <span class="original-price">门市价¥{{ club.originalPrice }}</span>
        </div>
      </div>
    </div>
    <div class="more-btn">查看更多</div>
    <div style="margin-top: 40px;"
         v-loading="loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"></div>
  </div>
</template>

<script>
const  url = "http://localhost:1000/"
export default {
  data() {
    return {
      // services: [
      //   {
      //     name: '[时光之旅] 泰式按摩60分钟',
      //     salesPeriod: '90天',
      //     salesNumber: '1888',
      //     currentPrice: '256',
      //     originalPrice: '495'
      //   },
      //   {
      //     name: '[时光之旅] 泰式按摩60分钟',
      //     salesPeriod: '90天',
      //     salesNumber: '1888',
      //     currentPrice: '256',
      //     originalPrice: '495'
      //   }
      // ],
      // items: [
      //   {
      //     imageUrl:'' ,
      //     name: '金鼎轩足道会所',
      //     rating: 5,
      //     consumption: '80人消费',
      //     location: '百子湾 | 按摩/足疗',
      //     features: ['免费停车', '洗浴房', '免费点心'],
      //     comment: '"来之前就很期待百子湾这家，满意，推荐"',
      //     price: '¥666元 | 春日浅吟 spa',
      //     originalPrice: '',
      //     sales: ''
      //   },
      //   {
      //     imageUrl: '@/static/images/img_20.png',
      //     name: '玉指缘影院足道',
      //     rating: 5,
      //     consumption: '80人消费',
      //     location: '百子湾 | 按摩/足疗',
      //     features: ['免费停车', '洗浴房', '免费点心'],
      //     comment: '"来之前就很期待百子湾这家，满意，推荐"',
      //     price: '¥256 | 【时光之旅】泰式按摩60分钟',
      //     originalPrice: '门市价¥495',
      //     sales: '90天销售1888'
      //   },
      //   // 更多类似的项目数据
      // ],
      loading: true,
      tableData1: [],
      tableData2: [],
    };
  },
  methods:{
    tj(){
      this.$router.push({ path: '/pageimil' });
    },
    findPage(){
      this.axios.post(url + "club/findAll").then(res => {
        this.tableData1 = res.data.data;
        console.log(this.tableData);
      })
    },
    findPall(){
      this.axios.post(url + "items/findPall").then(res => {
        this.tableData2 = res.data.data;
        console.log(this.tableData);
      })
    },
  },
  created() {
    this.findPall();
    this.findPage();
  }
}
</script>

<style scoped>
.xiu{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，如果需要 */
}
.service-list {
  width: 800px;
  margin: 0 auto;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.service-info {
  text-align: left;
}

.service-name {
  font-weight: bold;
}

.service-sales {
  color: #999;
}

.service-price.current-price {
  font-weight: bold;
  color: red;
}



.app {
  width: 800px;
  margin: 0 auto;
}

.category-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.category-bar span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.filter-bar select {
  padding: 5px;
}

.item {
  width: 800px;
  display: flex;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 10px;
}

.item-header {
  display: flex;
  align-items: center;
}

.item-header img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.item-info {
  flex: 1;
}

.item-info h3 {
  margin: 0;
}

.rating {
  display: flex;
  align-items: center;
}

.rating span {
  margin-right: 5px;
}

.features {
  display: flex;
  margin-top: 5px;
}

.features span {
  padding: 2px 5px;
  background-color: #f0f0f0;
  margin-right: 5px;
}

.comment {
  margin-top: 5px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-weight: bold;
}

.original-price {
  color: #999;
  text-decoration: line-through;
}

.sales {
  color: #999;
}

.more-btn {
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
